<template>
  <div class="footer-wrap">
      <div class="leftItem">
        <input type="checkbox" name="" id="" class="checkbox" v-model="checkedAll">
          完成{{count}}/全部{{todos.length}}
      </div>
      <div class="rightItem">
        <button @click="deleteAllFn">清除已完成</button>
      </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, ref, inject } from 'vue';
import { Todo } from '../types/todo';
export default defineComponent({
  name: 'footer',
  props: {
    deleteAll: {
      type: Function,
      required: true,
    },
    todos: {
      type: Array as () => Todo[],
      required:true,
    },
    checkedall: {
      type: Function,
      required:true,
    }
  },
  setup(props) {
    // 选中数
    let count = computed(()=>{
      return props.todos.reduce(function(pre, item, index){
        return pre + (item.checked ? 1 :0);
      }, 0);
    });
    // 全选或者全不选
    let checkedAll = computed({
      get() {
        return count.value>0 && count.value == props.todos.length;
      },
      set(val) {
        props.checkedall(val);
      }
    })
    let deleteAllFn = function () {
      props.deleteAll();
    };
    return {
      count,
      checkedAll,
      deleteAllFn,
    }
  }
});
</script>
<style scoped>
.footer-wrap{
  width: 100%;
  height: 40px;
  position: relative;
  /* background-color: red; */
}
.leftItem {
  position: absolute;
  width: 180px;
  height: 30px;
  /* background-color: wheat; */
  margin-top: 5px;
  padding: 0 5px;
  font-size: 14px;
  line-height: 30px;
}
.checkbox {
  margin-right: 10px;
  width: 15px;
  height: 15px;
  position: relative;
  top: 5px;
  display: inline-block;
}
.rightItem {
  position: absolute;
  right: 0;
  top: 8px;
  width: 100px;
}
</style>